---
export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {}

const { href, class: className, ...props } = Astro.props;
const isActive = href === Astro.url.pathname.replace(/\/$/, '');
---

<a href={href} class:list={[className, { active: isActive }]} {...props}>
  <slot />
</a>

<style>
  a {
    display: inline-block;
    text-decoration: none;
    font-size: 1.1rem;
    margin-left: 1rem;
    margin-top: 0.3rem;
    font-weight: bold;
  }
  a.active {
    font-weight: bold;
    text-decoration: underline;
  }
</style>
